/**login.less**/
page {
  height: 100vh;
  background-color: #f0f5ff;
  background-image: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
}

.container {
  min-height: 100vh;
  padding: 25rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  border-radius: 16rpx;
}

.login-card {
  width: 90%;
  max-width: 600rpx;
  padding: 40rpx;
  
  .welcome-text {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .welcome-subtext {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 50rpx;
  }
  
  .input-group {
    margin-bottom: 40rpx;
    
    .input-field {
      width: 100%;
      height: 88rpx;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      padding: 0 30rpx;
      font-size: 28rpx;
      color: #333;
      border: 1px solid rgba(255, 255, 255, 0.3);
      
      &:last-child {
        margin-bottom: 0;
      }
      
      &:focus {
        border-color: #3b82f6;
      }
    }
  }
  
  .button-group {
    margin-bottom: 40rpx;
    
    button {
      width: 100%;
      height: 88rpx;
      border-radius: 12rpx;
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      border: none;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      &:active {
        transform: scale(0.98);
      }
    }
    
    .login-btn {
      background: linear-gradient(145deg, #3b82f6, #60a5fa);
      color: white;
      box-shadow: 0 10rpx 20rpx rgba(59, 130, 246, 0.3);
    }
    
    .register-btn {
      background: rgba(255, 255, 255, 0.5);
      color: #3b82f6;
      border: 1px solid rgba(59, 130, 246, 0.3);
    }
  }
  
  .divider {
    display: flex;
    align-items: center;
    margin: 40rpx 0;
    
    .divider-line {
      flex: 1;
      height: 1px;
      background: rgba(0, 0, 0, 0.1);
    }
    
    .divider-text {
      padding: 0 20rpx;
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .third-party-login {
    display: flex;
    justify-content: center;
    gap: 40rpx;
    
    .third-party-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.5);
      transition: transform 0.2s;
      
      image {
        width: 40rpx;
        height: 40rpx;
      }
      
      &:active {
        transform: scale(0.95);
      }
      
      &.wechat {
        color: #07c160;
      }
      
      &.qq {
        color: #12b7f5;
      }
      
      &.weibo {
        color: #e6162d;
      }
    }
  }
}